﻿<%@ Page Title="注册新用户" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="NewUser.aspx.cs" Inherits="NewUser" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <!-- FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" rel="stylesheet">
<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('healthCalendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: [
                    {
                        title: '社区义诊',
                        start: '2024-10-15',
                        description: '社区为老人提供免费的体检和健康咨询。',
                    },
                    {
                        title: '健康讲座：老年健康生活方式',
                        start: '2024-10-22',
                        description: '健康专家将讲解老年人如何保持健康的生活习惯。',
                    },
                    {
                        title: '高血压筛查',
                        start: '2024-10-26',
                        description: '定期为社区老人提供免费的高血压筛查。',
                    },
                    {
                        title: '老年人健步走活动',
                        start: '2024-10-17',
                        description: '社区组织老年人参与健步走活动，锻炼身体。',
                    },
                    {
                        title: '心理健康讲座',
                        start: '2024-11-05',
                        description: '心理医生讲解如何保持心理健康，缓解压力。',
                    },
                    {
                        title: '老年人营养与饮食讲座',
                        start: '2024-11-10',
                        description: '如何通过合理饮食保持老年人的健康。',
                    },
                    {
                        title: '糖尿病筛查',
                        start: '2024-11-12',
                        description: '社区为老人提供免费的糖尿病筛查服务。',
                    },
                    {
                        title: '老年太极拳课程',
                        start: '2024-11-15',
                        description: '学习如何通过太极拳保持身体灵活性，提升健康。',
                    },
                    {
                        title: '耳鼻喉科专科检查',
                        start: '2024-11-18',
                        description: '为社区老人提供免费的耳鼻喉科专科检查。',
                    },
                    {
                        title: '老年人营养与饮食讲座',
                        start: '2024-12-02',
                        description: '如何通过合理饮食保持老年人的健康。',
                    },
                    {
                        title: '血液常规检查',
                        start: '2024-12-12',
                        description: '社区为老人提供免费的血液常规检查服务。',
                    },
                     {
                         title: '糖尿病筛查',
                        start: '2024-12-16',
                         description: '社区为老人提供免费的糖尿病筛查服务。',
                    },
                     {
                        title: '血压常规检查',
                        start: '2024-12-20',
                        description: '社区为老人提供免费的血压常规检查服务。',
                    },
                     {
                        title: '健康知识讲座',
                        start: '2024-12-24',
                        description: '社区为老人提供科学的健康小常识。',
                    },
                     {
                         title: '糖尿病筛查',
                         start: '2024-12-26',
                         description: '社区为老人提供免费的糖尿病筛查服务。',
                    },
                    {
                        title: '老年太极拳课程',
                        start: '2024-12-31',
                        description: '学习如何通过太极拳保持身体灵活性，提升健康。',
                    }
                     

                ],
                eventClick: function (info) {
                    alert(info.event.title + "\n" + info.event.extendedProps.description);
                }
            });

            calendar.render();
        });
    </script>


    <style type="text/css">
        .auto-style1{
            text-align: right;
            height: 17px;
            width: 100%;
            max-width: 600px;
            margin: auto;
            border-spacing: 10px;
            

            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .tdright {
            text-align: right;
            padding-right: 10px;
        }
         /* 表单中心标题 */
        .tdcenter {
            text-align: center;
            font-weight: bold;
            font-size: 22px;
            padding-bottom: 10px;
            color: #d63384;
        }
       
        /* 控制图片大小的样式 */
        .img-center {
            display: block;
            margin: 20px auto;
            width: 100%;
            max-width: 400px; /* 根据需要调整图片最大宽度 */
            height: auto;
        }
         /* 用户反馈部分样式 */
        .testimonials {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
        }

        .testimonials h3 {
            font-size: 18px;
            color: #d63384;
            margin-bottom: 10px;
            text-align: left;
        }

        .testimonials p {
            font-style: italic;
            color: #333;
            margin-bottom: 15px;
        }
          /* 注册须知部分样式 */
        .info-box {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            font-family: 'Open Sans', Arial, sans-serif;
            color: #444;
            font-size: 15px;
            line-height: 1.8;
            border-left: 5px solid #d63384;
        }

        /* 注册须知标题样式 */
        .info-box h3 {
            font-size: 18px;
            font-weight: bold;
            color: #d63384;
            margin-bottom: 15px;
        }

        /* 段落样式 */
        .info-box p {
            margin-bottom: 10px;
        }
        /* 按钮样式 */
        .btn-register {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 2px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .btn-register:hover {
            background-color: #0056b3;
        }
         /* 联系方式样式 */
        .support-info h3 {
            font-size: 18px;
            color: #d63384;
            margin-bottom: 10px;
        }

        .support-info p {
            font-size: 14px;
            color: #333;
        }
        .video-box {
            margin-top: 20px;
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 8px;
        }
        .video-box h3 {
            text-align: center;
            color: #d63384;
            margin-bottom: 10px;
        }
        .health-tips {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
        }
        /* 日历容器的整体样式 */
        #healthCalendar {
            max-width: 900px;
            margin: 40px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 标题栏样式 (例如 October 2024 的样式) */
        .fc-toolbar {
            background-color: #d63384; /* 淡紫色 */
            border-radius: 8px;
            color: white;
            padding: 10px;
        }

        /* 事件样式 */
        .fc-event {
            background-color: #d63384; /* 将事件背景颜色设置为淡紫色 */
            border: none;
            border-radius: 5px;
            color: white;
            padding: 5px;
        }

        /* 当前日期的背景样式 */
        .fc-day-today {
            background-color: #fce4ec; /* 将当前日期突出显示为淡紫背景 */
        }

        /* 日历中的日期单元格样式 */
        .fc-daygrid-day {
            border: 1px solid #e0e0e0;
        }

        /* 鼠标悬停事件时的样式 */
        .fc-event:hover {
            background-color: #a8276c; /* 让事件在鼠标悬停时稍微变暗 */
        }

        /* 日历的头部文字样式 */
        .fc-toolbar-title {
            font-family: 'Open Sans', Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
        }

        /* 切换按钮样式（例如 month、week、day） */
        .fc-button {
            background-color: #e0e0e0;
            border: none;
            border-radius: 4px;
            color: #333;
        }

        .fc-button-primary {
            background-color: #d63384;
            color: white;
        }

        .fc-button-primary:not(:disabled):active {
            background-color: #a8276c;
        }
            /*新闻*/
       #countdown {
            text-align: center;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            font-family: 'Arial', sans-serif;
        }

        #countdown h3 {
            color: #d63384;
            font-size: 24px;
            margin-bottom: 10px;
        }

        #countdown-timer {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table class="auto-style1">
        <tr>
            <td class="tdcenter" colspan="3">欢迎新用户注册</td>
        </tr>
        
        <tr>
            <td class="tdright">用户名:</td>
            <td>
                <asp:TextBox ID="txtName" runat="server" OnTextChanged="txtName_TextChanged"></asp:TextBox>
            </td>
            <td>
                <asp:RequiredFieldValidator ControlToValidate="txtName" Display="Dynamic" ForeColor="Red" ID="rfvName" runat="server" ErrorMessage="请输入用户名！"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="tdright">电话:</td>
            <td>
                <asp:TextBox ID="txtTelephone" runat="server" OnTextChanged="txtTelephone_TextChanged"></asp:TextBox>
            </td>
            <td>
                <asp:RequiredFieldValidator ControlToValidate="txtTelephone" Display="Dynamic" ForeColor="Red" ID="rfvTelephone" runat="server" ErrorMessage="请输入电话号码！"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="tdright">邮箱:</td>
            <td>
                <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
            </td>
            <td>
                <asp:RequiredFieldValidator ControlToValidate="txtEmail" Display="Dynamic" ForeColor="Red" ID="rfvEmail" runat="server" ErrorMessage="请输入您的邮箱！"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="tdright" colspan="2">
                <asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="邮箱格式不正确！" ControlToValidate="txtEmail" Display="Dynamic" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
                </asp:RegularExpressionValidator>
            </td>
        </tr>
        <tr>
            <td class="tdright">密码:</td>
            <td>
                <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
            </td>
            <td>
                <asp:RequiredFieldValidator ControlToValidate="txtPwd" Display="Dynamic" ForeColor="Red" ID="rfvPwd" runat="server" ErrorMessage="请输入密码！"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="tdright">确认密码:</td>
            <td>
                <asp:TextBox ID="txtPwdAgain" runat="server" TextMode="Password"></asp:TextBox>
            </td>
            <td>
                <asp:RequiredFieldValidator ControlToValidate="txtPwdAgain" Display="Dynamic" ForeColor="Red" ID="rfvPwdAgain" runat="server" ErrorMessage="请再次输入确认密码！"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="tdright" colspan="2">
                <asp:CompareValidator ControlToValidate="txtPwdAgain" ControlToCompare="txtPwd" Display="Dynamic" ForeColor="Red" ID="cvPwd" runat="server" ErrorMessage="两次密码不一致"></asp:CompareValidator>
            </td>
        </tr>
        <tr>
            <td class="tdcenter" colspan="3">
                <asp:Button ID="btnOk" runat="server" Text="立即注册" OnClick="btnOk_Click" />
            </td>
        </tr>
        <tr>
            <td>
                <a href="Login.aspx">我要登录</a>
            </td>
            <td colspan="2">
                <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
            </td>
        </tr>
    </table>
    <div class="video-box">
    <h3>老年人膳食科普</h3>
    <video width="100%" controls>
        <source src="image/intro.mp4" type="video/mp4">
        您的浏览器不支持视频播放，请升级或使用支持的视频播放器。
    </video>
</div>
       <div id="countdown">
    <h3>距离下一次血液常规检查</h3>
    <p id="countdown-timer">加载中...</p>
</div>


    <script>
        // 假设心理讲座的时间是 2024 年 12 月 14 日 14:00
        const targetDate = new Date('2024-12-14T14:00:00').getTime();

        function updateCountdown() {
            const now = new Date().getTime();
            const distance = targetDate - now;

            // 计算天、小时、分钟和秒
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // 如果时间到达或超过目标时间，显示活动已经开始
            if (distance < 0) {
                document.getElementById('countdown-timer').innerText = "心理讲座已开始";
            } else {
                document.getElementById('countdown-timer').innerText = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
            }
        }

        // 每 1 秒更新一次倒计时
        setInterval(updateCountdown, 1000);

    </script>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="info-box">
    <h3>注册须知</h3>
    <p>请确保您的密码至少包含8个字符，包括字母和数字。</p>
    <p>确保您的电话号码和电子邮箱地址是有效的，以便我们与您联系。</p>
</div>

    <div class="testimonials">
        <h3>用户反馈</h3>
        <p>“这个系统帮我更好地管理我父母的健康，真的很方便！” – 王女士</p>
        <p>“通过这个平台，我可以随时了解我爷爷的健康情况，非常安心。” – 李先生</p>

    </div>

    <div class="support-info">
    <h3>需要帮助？</h3>
    <p>您可以通过以下方式联系我们的客服：</p>
    <p>电话：400-123-4567</p>
    <p> <a href="https://wx.mail.qq.com/?cancel_login=true&from=get_ticket_fail">邮箱：527379257@qq.com</a></p>
       
</div>
   <div id="healthCalendar"></div>


</asp:Content>
